<template>
  <div class="container">
    <TopBar></TopBar>
    <!--    <div class="title">舆情报送 {{year}}年 第{{num}}号</div>-->
    <div class="form-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" labelPosition="right" label-width="80px"
               label-position="right">

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <div class="divide">
              <div style="margin-left: 8px">基本信息</div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="网页链接" prop="webLink">
              <el-input v-model="ruleForm.webLink"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="网站归属" prop="webSource">
              <el-radio-group v-model="ruleForm.webSource">
                <el-radio v-for="(item, i) in netList" :key="i" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="报送类别" prop="reviewType">
              <el-select
                class="form-item"
                v-model="ruleForm.reviewType"
                placeholder="请选择报送类别"
              >
                <el-option
                  v-for="(type, i) in dict.type.review_type"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <div class="divide">
              <div style="margin-left: 8px">发布情况</div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="文章标题" prop="articleTitle">
              <el-input v-model="ruleForm.articleTitle" :maxlength="50" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="标题备注" prop="titleRemark">
              <el-input v-model="ruleForm.titleRemark" :maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="发布事件" prop="publishAffair">
              <el-input v-model="ruleForm.publishAffair" :maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="发布者" prop="pub">
              <el-input v-model="ruleForm.pub" :maxlength="100" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
          </el-col>

        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <div class="divide">
              <div style="margin-left: 8px">详细信息</div>
            </div>
          </el-col>
        </el-row>
       <!-- <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本内容" prop="sampleContent">
              <el-input type="textarea" v-model="ruleForm.sampleContent"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本附件" prop="attachUrlInfos" style="float: left">
              <el-upload
                list-type="upload-demo"
                :action="uploadUrl"
                :headers="headers"
                :on-preview="handlePreview"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :before-remove="beforeRemove"
                :on-remove="handleRemove"
                :file-list="this.ruleForm.attachUrlInfos"
                :show-file-list="true"
                accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi, .txt, .doc, .docx, .pdf, .xls, .xlsx, .zip, .rar"
                multiple
              >
                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              </el-upload>


            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本内容" prop="sampleContent">
              <div id="editor"></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本附件" prop="attachUrlInfos" style="float: left">
              <el-button size="small" type="primary" icon="el-icon-upload" @click="openDialog">点击上传</el-button>
              <div v-if="ruleForm.attachUrlInfos">
                <div v-for="(item, i) in ruleForm.attachUrlInfos" :key="i"
                     style="display: flex; align-items: center; justify-content: flex-end">
                  <div style="margin: 0 20px 0 0">{{item.name}}</div>
                  <el-button type="text" @click="delFile(item)">删 除</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>




        <div class="footer-container">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-form>

    </div>
    <!--<div class="form-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" labelPosition="right" label-width="120px"
               label-position="right">

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="舆情报送">
              <div style="margin-left: 8px">{{ruleForm.reviewYear}}年 第{{ruleForm.reviewNum}}号</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="文章标题" prop="articleTitle">
              <el-input v-model="ruleForm.articleTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="报送领导" prop="reviewBoss">
              <el-input v-model="ruleForm.reviewBoss"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="报送/发往部门" prop="reviewDept">
              <el-input v-model="ruleForm.reviewDept"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本内容" prop="sampleContent">
              <div id="editor"></div>
              &lt;!&ndash;<el-input type="textarea" v-model="ruleForm.sampleContent"></el-input>&ndash;&gt;
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="样本附件" prop="attachUrlInfos" style="float: left">
              <el-button size="small" type="primary" icon="el-icon-upload" @click="openDialog">点击上传</el-button>
              <div v-if="ruleForm.attachUrlInfos">
                <div v-for="(item, i) in ruleForm.attachUrlInfos" :key="i"
                     style="display: flex; align-items: center; justify-content: flex-end">
                  <div style="margin: 0 20px 0 0">{{item.name}}</div>
                  <el-button type="text" @click="delFile(item)">删 除</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="footer-container">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-form>

    </div>-->
    <el-dialog
      title="上传文件"
      :visible.sync="open"
      :close-on-click-modal="false"
      close-on-press-escape
      destroy-on-close
      width="550px"
    >

      <el-upload
        class="upload-demo"
        drag
        ref="upload"
        :action="uploadUrl"
        :headers="headers"
        :on-preview="handlePreview"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :before-remove="beforeRemove"
        :on-remove="handleRemove"
        :on-change="handleChange"
        :file-list="this.ruleForm.attachUrlInfos"
        :show-file-list="true"
        :auto-upload="true"
        accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi, .txt, .doc, .docx, .pdf, .xls, .xlsx, .zip, .rar"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          仅允许导入PNG、JPG、JPEG、MP3、WAV、MP4、AVI、TXT、DOC、DOCX、pdf、xls、xlsx、zip、rar格式且不大于100M的文件。
        </div>

      </el-upload>
<!--      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
    </el-dialog>

  </div>
</template>

<script>
  import {getUserProfile} from "@/api/system/user";
  import {saveReview, getNum} from "@/api/system/application"
  import {getToken} from "@/utils/auth";
  import {mapGetters, mapState} from "vuex";
  import E from "wangeditor"
  import TopBar from "@/components/TopBar"

  export default {
    name: "feelings",
    dicts: ["review_type"],
    components: {
      TopBar
    },
    data() {
      return {
        user: {},
        ruleForm: {
          webLink: '',
          titleRemark: '',
          webSource: 1,
          reviewType: null,
          articleTitle: '',
          publishAffair: '',
          pub: '',
          sampleContent: '',
          attachUrlInfos: [],
          reviewYear: '',
          reviewNum: ''
        },
        rules: {
          articleTitle: [
            {required: true, message: '请输入文章标题', trigger: 'submit'},
          ],
          webLink: [
            { required: true, message: '请输入网页链接', trigger: 'submit' },
          ],
          webSource: [
            { required: true, message: '请选择网站归属', trigger: 'submit' }
          ],
          reviewType: [
            { required: true, message: '请选择报送类别', trigger: 'submit' }
          ],
          titleRemark: [
            { required: true, message: '请输入标题备注', trigger: 'submit' },
          ],
          publishAffair: [
            { required: true, message: '请输入发布事件', trigger: 'submit' },
          ],
          pub: [
            { required: true, message: '请输入发布者', trigger: 'submit' },
          ],
          sampleContent: [
            { required: true, message: '请填写样本内容', trigger: 'submit' }
          ],
          attachUrlInfos: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'submit' }
          ]
        },
        netList: [
          {
            label: "境内",
            value: 1
          }, {
            label: "境外",
            value: 2
          }],
        typeList: [
          {
            code: 1,
            info: "报送1"
          },
          {
            code: 1,
            info: "报送1"
          },
          {
            code: 1,
            info: "报送1"
          }
        ],
        uploadUrl: process.env.VUE_APP_BASE_API + "/application/upload/file", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken()
        },
        fileList: [],
        maxSize: 100,
        editor: null,
        open: false
      }
    },
    computed: {
      ...mapGetters([
        'avatar',
      ]),
    },
    created() {
      this.setRichText()
      this.getReportNum()
    },
    mounted() {
      this.getUser()
    },
    beforeDestroy() {
      this.editor.destroy()
      this.editor = null
    },
    methods: {
      setRichText() {
        this.$nextTick(() => {

          this.editor = new E('#editor')//创建对象
          // this.editor.highlight = hljs//代码高亮
          // this.editor.config.uploadImgServer = process.env.VUE_APP_BASE_API + "/application/upload/file"//图片上传的接口
          // this.editor.config.uploadFileName = 'file'
          // this.editor.config.uploadImgHeaders = this.headers
          // this.editor.config.uploadImgParams = {
          //   type:"img"
          // }
          // this.editor.config.uploadVideoServer = this.uploadUrl//视频上传的接口
          // this.editor.config.uploadVideoName = 'file'
          // this.editor.config.uploadVideoHeaders = this.headers
          // this.editor.config.uploadVideoParams = {
          //   header: this.headers,
          //   type:"video"
          // }
          this.editor.config.menus = [
            "head",
            "bold",
            "fontSize",
            "fontName",
            "italic",
            "underline",
            "strikeThrough",
            "indent",
            "lineHeight",
            "foreColor",
            "backColor",
            "link",
            "list",
            "todo",
            "justify",
            "quote",
            "emoticon",
            "table",
            "code",
            "splitLine",
            "undo",
            "redo"
          ]
          this.editor.create()
          let eds = document.getElementsByClassName('w-e-text-container')
          eds[0].style = eds[0].style.cssText + 'height: 200px'
        })
      },

      openDialog() {
        this.open = true
      },

      getReportNum() {
        this.ruleForm.reviewYear = new Date().getFullYear()
        getNum().then(res => {
          if (res.code === 200) {
            this.ruleForm.reviewNum = res.data
          } else {

          }
        }).catch(err => {

        })
      },

      getUser() {
        getUserProfile().then(res => {
          this.user = res.data;
          this.ruleForm.pub = this.user.nickName
        });
      },

      cancel() {
        this.$router.push('/')
      },

      submitUpload() {
        this.$refs.upload.submit();
       /* let temp = this.fileList
        console.log(1, this.fileList)
        for(let i = 0; i < temp.length - 1; i++) {
          console.log(i)
          // this.$refs.upload.submit();
        }*/
      },

      submit() {
        let content = this.editor.txt.html();
        this.ruleForm.sampleContent = content;
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.ruleForm.publisher = this.user.userName
            saveReview(this.ruleForm).then(res => {
              if (res.code === 200 && res.data) {
                this.$message.success(res.msg)
                // this.cancel()

                this.ruleForm = {
                  webLink: '',
                  titleRemark: '',
                  webSource: 1,
                  reviewType: null,
                  publishAffair: '',
                  publisher: this.user.userName,
                  reviewNum: '',
                  articleTitle: '',
                  reviewBoss: '',
                  reviewDept: '',
                  sampleContent: '',
                  attachUrlInfos: []
                }
                this.getReportNum()
                setTimeout(() => {//延时加载
                  this.editor.txt.html('')
                }, 0);

              } else {
                // this.$message.error(res.msg)
              }
            }).catch(err => {
              // this.$message.error(err)
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },

      //删除列表文件
      delFile(file) {
        console.log(file)
        let index = this.ruleForm.attachUrlInfos.indexOf(file)
        this.ruleForm.attachUrlInfos.splice(index, 1)
      },

      //移除上传文件
      // handleRemove() {
      //   this.ruleForm.attachUrlInfos = null
      //   this.fileList = []
      // },

      //切换文件时
      handleChange(file, list) {
        console.log(file, list)
        this.fileList = list
        // this.fileList.push(e)
      },

      //上传文件
      handlePreview(file) {
      },
      //上传文件成功
      handleSuccess(response, file, fileList) {
        this.$message.success("上传成功")
        file.attachUrl = response.msg
        this.ruleForm.attachUrlInfos.push(file)
        // console.log(this.ruleForm.attachUrlInfos)
      },
      //删除前钩子
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      //删除
      handleRemove(file, fileList) {

        if(!file.attachUrl) {
          let index = this.fileList.indexOf(file);
          console.log(index)
          this.fileList.splice(index, 1)
        }else {
          let index = this.ruleForm.attachUrlInfos.indexOf(file);
          this.ruleForm.attachUrlInfos.splice(index, 1)
        }


      },
      //开始上传
      beforeUpload(file) {
        if (file.size / 1024 / 1024 > this.maxSize) {
          this.$message.error({
            message: `上传文件大小不能超过${this.maxSize}M!`,
          });
          return false;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .divide {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F2329;
    letter-spacing: 0;
    position: relative;
    margin: 20px 0 12px;
    display: flex;
    align-items: center;

    /*    &::before {
          content: '';
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          background: #0056F9;
          border-radius: 2px;
        }*/
  }

  .title {
    width: 100vw;
    height: 50px;
    padding-left: 30px;
    background: #eef1f4;
    margin-top: 56px;
    line-height: 50px;
  }

  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    /*margin-top: 56px;*/

    .top-banner {
      position: fixed;
      height: 56px;
      width: 100vw;
      background-color: #031A2E;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      top: 0;
      left: 0;

      .logo-container {
        display: flex;
        align-items: center;

        .logo-title {
          font-family: PangMenZhengDao;
          font-size: 18px;
          color: #FFFFFF;
          margin-right: 12px;
          margin-left: 32px;
        }

        .version {
          background-image: linear-gradient(270deg, #76C0FF 0%, #1B58FF 100%);
          border-radius: 4px;
          font-family: Tensentype-RuiHeiJ-W5;
          font-size: 12px;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3px 8px;
        }
      }

      .avatar-container {
        margin-right: 32px;
        position: relative;

        .avatar-wrapper {
          margin-top: 5px;
          position: relative;
          display: flex;
          align-items: center;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #FFFFFF;
          letter-spacing: 0;

          .user-avatar {
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-right: 13px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            margin-left: 56px;
            /*position: absolute;
            right: -20px;
            top: 25px;*/
            font-size: 12px;
          }
        }
      }
    }


    .form-container {
      overflow-y: scroll;
      width: 846px;
      margin-top: 56px;
    }

    .form-container::-webkit-scrollbar {
      width: 0 !important;
    }

    /* 隐藏水平滚动条 */
    .form-container::-webkit-scrollbar {
      height: 0 !important;
    }


  }

  .footer-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /*    position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);*/
  }

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 56px;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$base-sidebar-width});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px);
  }

  .sidebarHide .fixed-header {
    width: 100%;
  }

  .mobile .fixed-header {
    width: 100%;
  }

  ::v-deep #editor {
    z-index: 1 !important;
    position: relative;
  }

  ::v-deep .upload-demo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
  }
</style>
